<!-- 个人信息页面我的游戏组件 -->
<template>
  <div class="card" v-if="game">
    <div class="left">
        <img :src="`${game.photo}`" alt="" class="cover">
        <span class="name"><img :src="game.icon" alt="" class="icon" />{{ game.gname}}</span>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        game: null,
    },
    data(){
        return{

        }
    },
}
</script>

<style lang="less" scoped>
*{
    color: #999;
}

.card{
    display: flex;
    align-items: center;
    margin: 8px 0px;
    background: linear-gradient(to right, #1A2A3C 40%, #35435B 85%,#28374C 100%);
    .left{
        width: 100%;
        height: 100%;
        display: flex;
        img{
            object-fit: cover;
            width: 200px;
            height: 120px;
        }
        .icon{
            width: 20px;
            height: 20px;
            margin-right: 6px;
        }
        .name{
            margin-top: -50px;
            
            display: flex;
            align-items: center;
            // vertical-align: 340%;
            padding-left: 20px;
            font-size: 20px;
        }
    }
}
</style>